<template>
	<view>
		<view class="uni-padding-wrap">
			<form @submit="formSubmit">
				
				<view class="un-text1">
					<text>退货原因</text>
				</view>
				<view >
					<wzp-picker ref="wzpPicker" :mode="mode" :pickerList="pickerList" :defaultIndex="defaultIndex"  @onCancle="onCancle" @onConfirm="onConfirm"></wzp-picker>
					<input type="text" class="uni-input" name="emp_no" @tap='showOnePicker' :value="pickerValue==''?'请选择退货原因':pickerValue"></input>
					<text class="yticon icon-you un-xuan"></text> 
				</view>
				
				<view class="un-text">
					<text>问题描述</text>
				</view>
				<view  class="un-textarea" >
					<textarea class="un-textarea1" maxlength="500" placeholder="请输入退货问题描述" @input="conInput" v-model="contenttt" name="emp_text"></textarea>
				</view>
				<view class="un-em">
					<view >{{tatVal}}</view><view >/500</view>
				</view>
				
				<view class="un-text">
					<text>上传图片（最多3张）</text>
				</view>
				<view class="un-image-section">
					<view class="block" v-for="(image,index) in imageSrc" :key="index" >
							<view class="yticon icon-iconfontshanchu1 un-shan" @click="deleteCartItem(index)" > </view>
							<image  class="image" :src="image" :data-src="image" @tap="previewImage"></image>
					</view>
					<image src="/static/jia.png"  class="image1 " @click="chooseImage"></image>
				</view>
				
				<view class="un-text">
					<text>联系方式</text>
				</view>
				<view>
					<view class="cu-form-group" style="border-bottom: 0;margin-top: 30upx;">
						<view class="title">联系人 :</view>
						<input placeholder="请填写联系人" name="username" :value="user.username"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">联系电话 :</view>
						<input placeholder="请填写联系电话" name="userphone" :value="user.userphone"></input>
					</view>
				</view>
				
				<view class="uni-btn-v uni-common-mt">
					<button class="btn-submit" formType="submit" type="primary">提交</button>
				</view>
				
			</form>
			
			<view class="un-text2"><text class="iconfont icon-tanhao"></text>温馨提示 ：</view>
			<view class="un-text2">• 商品寄回地址将在审核通过后以短信形式告知，或在申请记录中查询。</view>
			<view class="un-text2">• 提交服务单后，售后专员可能与您电话沟通，请保持手机畅通。</view>
			<view class="un-text2">• 退货处理成功后退款金额将原路返回到您的支持账户中。</view>
			
		</view>
	</view>
</template>
<script>
	import wzpPicker from '@/components/wzp-picker/wzpPicker.vue';
	//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	var  graceChecker = require("../../../common/graceChecker.js");
	export default {
		components: {
			wzpPicker
		},
		
		data() {
			return {
				pickerValue: "",
				mode: "",
				pickerList: [],
				defaultIndex: [],
				contenttt:'',
				tatVal: 0,
				imageSrc: [],
				user:{username:'大梨',userphone:'180****1849'}
			}
		},
		onLoad(){
			
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onUnload() {
			this.imageSrc = [];
		},
		methods: {
			formSubmit: function (e) {
				//将下列代码加入到对应的检查位置
				//定义表单规则
				var rule = [
					{name:"emp_no", checkType : "notsame", checkRule:"请选择退货原因",  errorMsg:"请选择退货原因"},
					{name:"emp_text", checkType : "notnull", checkRule:"",  errorMsg:"请填写问题描述"},
					{name:"username", checkType : "notnull", checkRule:"",  errorMsg:"请填写联系人"},
					{name:"userphone", checkType : "phoneno", checkRule:"",  errorMsg:"请填写正确的联系电话"}
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if(checkRes){
					//需要返回一个服务单号recordId
					uni.showToast({title:"验证通过!", icon:"none"});
					uni.redirectTo({
						url:'/pages/aftersale/applySuccess/applySuccess?recordId='+'1'
					})
				}else{
					uni.showToast({ title: graceChecker.error, icon: "none" });
				}
			},
			showOnePicker() {
				this.mode = 'one';
				this.pickerList = [{
						label: "质量问题"
					},
					{
						label: "配件问题"
					},
					{
						label: "少发/漏发"
					},
					{
						label: "与商品描述不符"
					},
					{
						label: "包装/商品残破"
					},
					{
						label: "发票问题"
					},
					{
						label: "其它"
					}
				];
				this.defaultIndex = [3];
				this.$refs.wzpPicker.showPicker();
			},
			onBackPress() {
				if (this.$refs.wzpPicker.pickerShow) {
					this.$refs.wzpPicker.closePicker();
					return true;
				}
			},
			onConfirm(e) {
				this.pickerValue = this.pickerList[e[0]].label;
			},
			conInput(e){
				this.tatVal=e.detail.value.length;
				if(this.tatVal===500){
					uni.showToast({
						icon:'none',
						title:'最多只能输入500个字'
					})
				}
			},
			//删除
			deleteCartItem(index){
				let list = this.imageSrc;
				let row = list[index];
				let id = row.id;
				this.imageSrc.splice(index, 1);
				uni.showToast({
					title: '删除成功',
					icon: 'success',
					duration: 1000
				})
			},
			/**
			 * 预览图片
			 */
			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.imageSrc
				})
			},
			/**
			 * 上传图片
			 */
			chooseImage: function() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						console.log('chooseImage success, temp path is', res.tempFilePaths[0])
						var imageSrc = res.tempFilePaths[0]
						uni.uploadFile({
							url: 'https://unidemo.dcloud.net.cn/upload',
							filePath: imageSrc,
							fileType: 'image',
							name: 'data',
							success: (res) => {
								console.log('uploadImage success, res is:', res)
								uni.showToast({
									title: '上传成功',
									icon: 'success',
									duration: 1000
								})
								if (this.imageSrc.length < 3 ){
									this.imageSrc.push(imageSrc);
								}else{
									uni.showToast({
										title: '超出最大数目',
										icon: 'none',
										duration: 1000
									})
								}
							},
							fail: (err) => {
								console.log('uploadImage fail', err);
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							}
						});
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
		position: relative;
		margin-bottom: 50upx;
	}
	.btn-submit{
		background-color: #E02E24;
		margin: 50upx 60upx;
	}
	
	.un-text{
		font-size: 28upx;
		color: #999999;
		padding: 30upx 0upx 0upx 60upx;
	}
	.un-text1{
		font-size: 28upx;
		color: #999999;
		padding: 70upx 0upx 0upx 60upx;
		border-top: 1upx solid #F2F2F2;
	}
	.un-text2{
		font-size: 25upx;
		color: #999999;
		padding: 0upx 60upx;
		line-height: 50upx;
	}
	.uni-input {
		margin: 15upx 60upx;
		height: 95upx;
		padding: 0upx 35upx;
		line-height:50upx;
		font-size:28upx;
		background:#FFF;
		flex: 1;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(228, 228, 228, 1);
		border-radius: 0px;
		color: #999999;
	}
	.un-xuan{
		position:absolute;
		top: 150upx;
		right: 70upx;
		font-size:50upx;
		color: #999999;
	}
	
	.un-textarea{
		padding:20upx 20upx 50upx 20upx;
		line-height:1.6;
		font-size:28upx;
		height:400upx;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(228, 228, 228, 1);
		border-radius: 0px;
		margin: 30upx 60upx;
		background:#FFF;
		color: #666666;
	}
	.un-textarea1{
		font-size: 28upx;
	}
	.un-em{
		position: absolute;
		display: flex;
		z-index: 1;
		top: 670upx;
		right: 130upx;
		font-size: 28upx;
		color: #999999;
	}
	
	.un-image-section{
		display: flex;
		flex-wrap: wrap;
		margin: 20upx 60upx;
		.image {
			
			display: flex;
			width: 100%;
			height: 180upx;
			margin: 0upx;
			border: 2upx solid #9D9D9D;
			
		}
		
		.block{
			position: relative;
			width: 30%;
			margin: 10upx;
			.un-shan{
				position: absolute;
				top: 20upx;
				right: 20upx;
				z-index: 1;
			}
		}
		.image1{
			display: flex;
			width: 30%;
			height: 180upx;
			margin: 10upx;
			border: 2upx solid #CCCCCC;
			
		}
		
	}
	
	.cu-form-group {
		background-color: #ffffff;
		padding: 1upx 50upx;
		display: flex;
		align-items: center;
		min-height: 83upx;
		justify-content: space-between;
		margin: 0upx 60upx;
		border: 1upx solid #F2F2F2;
		.title {
			text-align: justify;
			font-size: 28upx;
			position: relative;
			height: 60upx;
			line-height: 60upx;
			min-width: calc(4em + 15px);
		}
		input{
			width: 550upx;
			font-size: 28upx;
			color: #999999;
		}
	}
	
</style>
